<template>
  <div class="w-full">
    <el-tree-select
      v-model="modelValue"
      :data="list"
      :placeholder="props.placeholder"
      :value-key="props.valueKey"
      :check-strictly="props.checkStrictly"
      :disabled="props.disabled"
      :props="{ label: props.labelKey, children: props.childrenKey }"
      @change="valChange"
    />
  </div>
</template>

<script setup>
import { getCommonData } from "@/api/project/common.js";
const modelValue = defineModel();
const dataList = ref([]);
const props = defineProps({
  dataList: Array,
  placeholder: {
    type: String,
    default: "",
  },
  valueKey: {
    type: String,
    default: "id",
  },
  labelKey: {
    type: String,
    default: "label",
  },
  childrenKey: {
    type: String,
    default: "children",
  },
  checkStrictly: {
    //是否可选择任何节点
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  isFetch: {
    type: Boolean,
    default: true,
  },
  paramsName: String,
});
const list = computed(() => {
  return props.isFetch ? dataList.value : props.dataList;
});
//获取数据
const getDataList = async () => {
  const params = {
    bizName: props.paramsName,
  };
  try {
    const res = await getCommonData(params);
    dataList.value = res.data;
  } catch (error) {
    console.log(error);
  }
};
const emit = defineEmits(["change"]);
//选择的值改变
const valChange = (val) => {
  emit("change", val);
};
onMounted(() => {
  props.isFetch && getDataList();
});
</script>

<style scoped lang="scss"></style>
